// 彩带效果系统
function createConfetti() {
    const container = document.getElementById('confetti-container');
    if (!container) return;
    
    // 创建大量彩带
    for (let i = 0; i < 100; i++) {
        setTimeout(() => {
            createConfettiPiece();
        }, Math.random() * 1000);
    }
}

function createConfettiPiece() {
    const container = document.getElementById('confetti-container');
    if (!container) return;
    
    const colors = [
        '#ff6b9d', '#4ecdc4', '#ffe66d', '#ff8a80', 
        '#82b1ff', '#b388ff', '#4caf50', '#ff9800'
    ];
    
    const shapes = ['square', 'circle', 'triangle'];
    const shape = shapes[Math.floor(Math.random() * shapes.length)];
    const color = colors[Math.floor(Math.random() * colors.length)];
    
    const confetti = document.createElement('div');
    const size = Math.random() * 10 + 5;
    
    // 基础样式
    confetti.style.cssText = `
        position: absolute;
        width: ${size}px;
        height: ${size}px;
        background: ${color};
        pointer-events: none;
        left: ${Math.random() * window.innerWidth}px;
        top: -20px;
    `;
    
    // 根据形状设置样式
    switch(shape) {
        case 'circle':
            confetti.style.borderRadius = '50%';
            break;
        case 'triangle':
            confetti.style.width = '0';
            confetti.style.height = '0';
            confetti.style.borderLeft = `${size/2}px solid transparent`;
            confetti.style.borderRight = `${size/2}px solid transparent`;
            confetti.style.borderBottom = `${size}px solid ${color}`;
            confetti.style.background = 'transparent';
            break;
        default: // square
            break;
    }
    
    container.appendChild(confetti);
    
    // 动画参数
    const fallDistance = window.innerHeight + 100;
    const fallDuration = 3000 + Math.random() * 2000;
    const rotation = Math.random() * 720 - 360;
    const sway = Math.random() * 200 - 100;
    
    // 下落动画
    const animation = confetti.animate([
        {
            transform: 'translateY(0) rotate(0deg) translateX(0)',
            opacity: 1
        },
        {
            transform: `translateY(${fallDistance}px) rotate(${rotation}deg) translateX(${sway}px)`,
            opacity: 0.3
        }
    ], {
        duration: fallDuration,
        easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
    });
    
    animation.onfinish = () => {
        confetti.remove();
    };
}

// 爆炸式彩带
function createConfettiExplosion(x, y) {
    const colors = [
        '#ff6b9d', '#4ecdc4', '#ffe66d', '#ff8a80', 
        '#82b1ff', '#b388ff', '#4caf50', '#ff9800'
    ];
    
    for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        const color = colors[Math.floor(Math.random() * colors.length)];
        const size = Math.random() * 8 + 3;
        
        confetti.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            border-radius: ${Math.random() < 0.5 ? '50%' : '0'};
            pointer-events: none;
            left: ${x}px;
            top: ${y}px;
        `;
        
        document.getElementById('confetti-container').appendChild(confetti);
        
        // 爆炸方向
        const angle = (Math.PI * 2 * i) / 50;
        const velocity = 50 + Math.random() * 150;
        const endX = x + Math.cos(angle) * velocity;
        const endY = y + Math.sin(angle) * velocity;
        
        confetti.animate([
            {
                transform: 'translate(0, 0) rotate(0deg) scale(1)',
                opacity: 1
            },
            {
                transform: `translate(${endX - x}px, ${endY - y + 100}px) rotate(720deg) scale(0)`,
                opacity: 0
            }
        ], {
            duration: 1500 + Math.random() * 1000,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
        }).onfinish = () => {
            confetti.remove();
        };
    }
}

// 彩带雨
function createConfettiRain(duration = 5000) {
    const startTime = Date.now();
    
    function dropConfetti() {
        if (Date.now() - startTime < duration) {
            createConfettiPiece();
            setTimeout(dropConfetti, 50 + Math.random() * 100);
        }
    }
    
    dropConfetti();
}

// 彩虹彩带
function createRainbowConfetti() {
    const colors = ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff00', '#00ff80', '#00ffff'];
    
    colors.forEach((color, index) => {
        setTimeout(() => {
            for (let i = 0; i < 20; i++) {
                const confetti = document.createElement('div');
                confetti.style.cssText = `
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: ${color};
                    border-radius: 50%;
                    pointer-events: none;
                    left: ${Math.random() * window.innerWidth}px;
                    top: -20px;
                `;
                
                document.getElementById('confetti-container').appendChild(confetti);
                
                confetti.animate([
                    {
                        transform: 'translateY(0) rotate(0deg)',
                        opacity: 1
                    },
                    {
                        transform: `translateY(${window.innerHeight + 100}px) rotate(360deg)`,
                        opacity: 0
                    }
                ], {
                    duration: 3000,
                    easing: 'ease-in'
                }).onfinish = () => {
                    confetti.remove();
                };
            }
        }, index * 200);
    });
}

// 心形彩带
function createHeartConfetti() {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 3;
    
    // 心形路径
    for (let t = 0; t < Math.PI * 2; t += 0.2) {
        setTimeout(() => {
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
            
            const confetti = document.createElement('div');
            confetti.style.cssText = `
                position: absolute;
                width: 6px;
                height: 6px;
                background: #ff6b9d;
                border-radius: 50%;
                pointer-events: none;
                left: ${centerX + x * 2}px;
                top: ${centerY + y * 2}px;
            `;
            
            document.getElementById('confetti-container').appendChild(confetti);
            
            confetti.animate([
                {
                    transform: 'scale(0)',
                    opacity: 0
                },
                {
                    transform: 'scale(1)',
                    opacity: 1
                },
                {
                    transform: 'scale(0)',
                    opacity: 0
                }
            ], {
                duration: 2000,
                easing: 'ease-in-out'
            }).onfinish = () => {
                confetti.remove();
            };
        }, t * 100);
    }
}

// 数字彩带 (显示"1")
function createNumberOneConfetti() {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    
    // 数字1的路径点
    const numberOnePoints = [
        // 垂直线
        {x: 0, y: -50}, {x: 0, y: -40}, {x: 0, y: -30}, {x: 0, y: -20},
        {x: 0, y: -10}, {x: 0, y: 0}, {x: 0, y: 10}, {x: 0, y: 20},
        {x: 0, y: 30}, {x: 0, y: 40}, {x: 0, y: 50},
        // 顶部斜线
        {x: -10, y: -40}, {x: -5, y: -45},
        // 底部横线
        {x: -15, y: 50}, {x: -10, y: 50}, {x: -5, y: 50}, {x: 5, y: 50}, {x: 10, y: 50}, {x: 15, y: 50}
    ];
    
    numberOnePoints.forEach((point, index) => {
        setTimeout(() => {
            const confetti = document.createElement('div');
            confetti.style.cssText = `
                position: absolute;
                width: 8px;
                height: 8px;
                background: #ffe66d;
                border-radius: 50%;
                pointer-events: none;
                left: ${centerX + point.x}px;
                top: ${centerY + point.y}px;
                box-shadow: 0 0 10px #ffe66d;
            `;
            
            document.getElementById('confetti-container').appendChild(confetti);
            
            confetti.animate([
                {
                    transform: 'scale(0) rotate(0deg)',
                    opacity: 0
                },
                {
                    transform: 'scale(1.5) rotate(180deg)',
                    opacity: 1
                },
                {
                    transform: 'scale(1) rotate(360deg)',
                    opacity: 1
                }
            ], {
                duration: 1000,
                easing: 'ease-out'
            });
            
            // 3秒后开始淡出
            setTimeout(() => {
                confetti.animate([
                    { opacity: 1 },
                    { opacity: 0 }
                ], {
                    duration: 1000,
                    easing: 'ease-out'
                }).onfinish = () => {
                    confetti.remove();
                };
            }, 3000);
        }, index * 100);
    });
}

// 清理所有彩带
function clearConfetti() {
    const container = document.getElementById('confetti-container');
    if (container) {
        container.innerHTML = '';
    }
}

// 组合彩带效果
function createCelebrationConfetti() {
    createConfettiRain(3000);
    setTimeout(() => createHeartConfetti(), 1000);
    setTimeout(() => createNumberOneConfetti(), 2000);
    setTimeout(() => createRainbowConfetti(), 3000);
}

